<template>
   <div class="account-setting-base">
      <div class="setting-content">
         <div class="layout-item right">
            <div class="setting-info-title">
               <span>密码设置</span>
            </div>
            <div class="setting-info">
               <div class="setting-info-content">
                  <el-row :gutter="15">
                     <el-form
                        ref="elForm"
                        :model="formData"
                        :rules="rules"
                        size="medium"
                        label-width="100px"
                        label-position="top"
                     >
                        <el-col :span="24">
                           <el-form-item label="原密码" prop="field101">
                              <el-input
                                 v-model="formData.field101"
                                 placeholder="请输入原密码"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item label="新密码" prop="field104">
                              <el-input
                                 v-model="formData.field104"
                                 placeholder="请输入新密码"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                         <el-col :span="24">
                           <el-form-item label="确认密码" prop="field104">
                              <el-input
                                 v-model="formData.field104"
                                 placeholder="请输入新密码"
                                 clearable
                                 :style="{width: '100%'}"
                              ></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="24">
                           <el-form-item size="large" style="text-align:center">
                              <el-button type="primary" @click="submitForm">提交</el-button>
                              <el-button @click="resetForm">重置</el-button>
                           </el-form-item>
                        </el-col>
                     </el-form>
                  </el-row>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
export default {
   data() {
      return {
         userInfo: {
            name: "小王",
            src:
               "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587027940455&di=8b3f9f4c9779472321ed926453f9ead8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F10%2F20170410095843_SEvMy.thumb.700_0.jpeg"
         },
         formData: {
            field101: undefined,
            field104: undefined,
            field103: undefined,
         },
         rules: {
            field101: [
               {
                  required: true,
                  message: "请输入单行文本机构ID",
                  trigger: "blur"
               }
            ],
            field104: [
               {
                  required: true,
                  message: "请输入机构名称",
                  trigger: "blur"
               }
            ],
            field103: [
               {
                  required: true,
                  message: "请输入组织创建者",
                  trigger: "blur"
               }
            ],
         },
      };
   },
   created() {},
   destroyed() {},
   mounted() {},
   methods: {
      submitForm() {
         this.$refs["elForm"].validate(valid => {
            if (!valid) return;
            // TODO 提交表单
         });
      },
      resetForm() {
         this.$refs["elForm"].resetFields();
      },
   }
};
</script>
<style scoped lang="less">
.account-setting-base {
   .wrapper-main {
      padding-left: 0;
   }

   .setting-content {
      display: flex;
      flex-direction: row;

      .right {
         flex: 1 1 0;
         padding: 8px 40px;

         .setting-info-title {
            font-size: 20px;
         }

         .setting-info {
            display: flex;
            flex-direction: row;
            padding-top: 12px;

            &-content {
               width: 320px;
            }

            &-avatar {
               padding-left: 104px;
               display: flex;
               flex-direction: column;

               .avatar {
                  margin-top: 12px;
               }

               .avatar-uploader {
                  width: 115px;
                  margin: 24px auto;
               }
            }
         }
      }
   }
}
</style>
